<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>SpringBoot 2.0</title>
    <link rel="stylesheet" th:href="@{/plugins/layui/css/layui.css}" media="all" />
    <link rel="stylesheet" th:href="@{/plugins/font-awesome/css/font-awesome.min.css}" media="all" />
    <link rel="stylesheet" th:href="@{/src/css/app.css}" media="all" />
    <link rel="stylesheet" th:href="@{/src/css/themes/default.css}" media="all" id="skin" kit-skin />
    <style>
        .layui-edge{ margin-top: -20px;}
    </style>
</head>

<body class="kit-theme">
<div class="layui-layout layui-layout-admin kit-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">Sprngboot 2.0</div>
        <div class="layui-logo kit-logo-mobile">K</div>
        <ul class="layui-nav layui-layout-left kit-nav">
            <li class="layui-nav-item"><a href="javascript:;">控制台</a></li>
            <li class="layui-nav-item"><a href="javascript:;">商品管理</a></li>
            <li class="layui-nav-item">
                <a href="javascript:;">其它系统</a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;">邮件管理</a></dd>
                    <dd><a href="javascript:;">消息管理</a></dd>
                    <dd><a href="javascript:;">授权管理</a></dd>
                </dl>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right kit-nav">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <i class="layui-icon">&#xe63f;</i> 皮肤
                </a>
                <dl class="layui-nav-child skin">
                    <dd><a href="javascript:;" data-skin="default" style="color:#393D49;"><i class="layui-icon">&#xe658;</i> 默认</a></dd>
                    <dd><a href="javascript:;" data-skin="orange" style="color:#ff6700;"><i class="layui-icon">&#xe658;</i> 橘子橙</a></dd>
                    <dd><a href="javascript:;" data-skin="green" style="color:#00a65a;"><i class="layui-icon">&#xe658;</i> 原谅绿</a></dd>
                    <dd><a href="javascript:;" data-skin="pink" style="color:#FA6086;"><i class="layui-icon">&#xe658;</i> 少女粉</a></dd>
                    <dd><a href="javascript:;" data-skin="blue.1" style="color:#00c0ef;"><i class="layui-icon">&#xe658;</i> 天空蓝</a></dd>
                    <dd><a href="javascript:;" data-skin="red" style="color:#dd4b39;"><i class="layui-icon">&#xe658;</i> 枫叶红</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="http://m.zhengjinfan.cn/images/0.jpg" class="layui-nav-img"> Van
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;" kit-target data-options="{url:'basic.html',icon:'&#xe658;',title:'基本资料',id:'966'}"><span>基本资料</span></a></dd>
                    <dd><a href="javascript:;">安全设置</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="#" id="logout"><i class="fa fa-sign-out" aria-hidden="true"></i> 注销</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black kit-side">
        <div class="layui-side-scroll">
            <div class="kit-side-fold"><i class="fa fa-navicon" aria-hidden="true"></i></div>
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="kitNavbar" kit-navbar>
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;"><i class="fa fa-plug" aria-hidden="true"></i><span> 基本元素</span></a>
                    <dl class="layui-nav-child">
                        <dd>
                            <a href="javascript:;" kit-target data-options="{url:'test.html',icon:'&#xe6c6;',title:'表格',id:'1'}">
                                <i class="layui-icon">&#xe6c6;</i><span> 表格</span></a>
                        </dd>
                        <dd>
                            <a href="javascript:;" data-url="form.html" data-icon="fa-user" data-title="表单" kit-target data-id='2'><i class="fa fa-cog" aria-hidden="true"></i><span> 表单</span></a>
                        </dd>
                        <dd>
                            <a href="javascript:;" data-url="nav.html" data-icon="&#xe628;" data-title="导航栏" kit-target data-id='3'><i class="layui-icon">&#xe628;</i><span> 导航栏</span></a>
                        </dd>
                        <dd>
                            <a href="javascript:;" data-url="list4.html" data-icon="&#xe614;" data-title="列表四" kit-target data-id='4'><i class="layui-icon">&#xe614;</i><span> 列表四</span></a>
                        </dd>
                        <dd>
                            <a href="javascript:;" kit-target data-options="{url:'https://www.baidu.com',icon:'&#xe658;',title:'百度一下',id:'5'}"><i class="layui-icon">&#xe658;</i><span> 百度一下</span></a>
                        </dd>
                        <dd>
                            <a href="javascript:;" kit-target data-options="{url:'/auth/role/page',icon:'&#xe658;',title:'百度一下',id:'21'}"><i class="layui-icon">&#xe658;</i><span> 百度一下</span></a>
                        </dd>
                    </dl>
                </li>
                <li class="layui-nav-item layui-nav-itemed" th:each="menu : ${menuTree}">
                    <a href="javascript:;"><i class="fa fa-plug" aria-hidden="true"></i><span th:text="${menu.text}"> 系统管理</span></a>
                    <dl class="layui-nav-child" th:if="${menu.children != null}">
                        <dd th:each="tree: ${menu.children}"><a href="javascript:;" kit-target th:data-options="|{url:'${tree.url}',icon:'&#xe658;',title:'${tree.text}',id:'${tree.id}'}|"><i class="layui-icon">&#xe658;</i><span th:text="${tree.text}"> 组织管理</span></a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>
    <div class="layui-body" id="container">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;"><i class="layui-icon layui-anim layui-anim-rotate layui-anim-loop">&#xe63e;</i> 请稍等...</div>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        2017 &copy;
        <a href="http://kit.zhengjinfan.cn/">kit.zhengjinfan.cn/</a> MIT license
    </div>
</div>
<script th:src="@{/plugins/layui/layui.js}"></script>
<script>
    var message;
    layui.config({
        base: './build/js/',
        version: '1.0.1'
    }).use(['app', 'message', 'common', 'layim','socket', 'req'], function() {
        var app = layui.app, $ = layui.jquery, layer = layui.layer,
        common = layui.common, layim = layui.layim, socket = layui.socket, req = layui.req;
        //将message设置为全局以便子页面调用
        message = layui.message;

        var $ =layui.jquery;
        var selfFlag = false;
        //基础配置
        layim.config({
            init: { url: '/layim/base'},
            members: {
                "list": [{
                    "username": "马小云" //群员昵称
                    ,"id": "168168" //群员id
                    ,"avatar": "http://tp4.sinaimg.cn/2145291155/180/5601307179/1" //群员头像
                    ,"sign": "让天下没有难写的代码" //群员签名
                }]
            },
            tool: [{
                alias: 'code' //工具别名
                ,title: '代码' //工具名称
                ,icon: '&#xe64e;' //工具图标，参考图标文档
            }]
            //上传图片接口
            ,uploadImage: {url: '/layim/uploadImg'}
            //上传文件接口
            ,uploadFile: {url: '/layim/uploadFile'}

            ,isAudio: true //开启聊天工具栏音频
            ,isVideo: true //开启聊天工具栏视频
            ,initSkin: '5.jpg' //1-5 设置初始背景
            ,notice: true //是否开启桌面消息提醒，默认false
            ,msgbox: '/layim/msgbox'
            ,find: layui.cache.dir + 'css/modules/layim/html/find.html' //发现页面地址，若不开启，剔除该项即可
            ,chatLog: layui.cache.dir + 'css/modules/layim/html/chatLog.html' //聊天记录页面地址，若不开启，剔除该项即可

        });
        socket.config({
            log:true,
            token:'/layim/token',
            server:'ws://127.0.0.1:8888'
        });

        socket.on('open',function (e) {
            console.log("监听到事件：open");
        });
        socket.on('close',function (e) {
            console.log("监听到事件：close");
        });
        socket.on('error',function (e) {
            console.log("监听到事件：error");
        });
        socket.on('msg',function (e) {
            var msg = JSON.parse(e.data);
            var handleChat = function (msg) {
                if (selfFlag) {
                    selfFlag = false;
                    return;
                }
                layim.getMessage(msg);
            }
            var handleStatus=function (msg) {
                var status ='';
                if(typeof msg.count !== 'undefined'){
                    status = msg.count+'人在线';
                }else{
                    status = msg.online?'在线':'离线';
                }
                layim.setChatStatus('<span style="color:#FF5722;">'+status+'</span>');
            }
            if (msg.mtype) {
                switch (msg.mtype) {
                    case -1:
                        return console.log(msg.msg);
                    case socket.mtype.chatFriend:
                    case socket.mtype.chatGroup:
                        handleChat(msg);
                        break;
                    case socket.mtype.checkIsOnline:
                    case socket.mtype.checkOnlineCount:
                        handleStatus(msg);
                        break;
                    case socket.mtype.serverNotice:
                        layim.msgbox(msg.count);
                        break;
                    case socket.mtype.addFriendNotice:
                        layim.addList({
                            type:msg.type,
                            avatar:msg.avatar,
                            username:msg.username,
                            groupid:msg.groupid,
                            sign:msg.sign,
                            id:msg.id
                        });
                        msg.mtype=socket.mtype.chatFriend;
                        msg.content="我们已经是好友啦，一起来聊天吧！";
                        layim.getMessage(msg);
                        break;
                    case socket.mtype.onofflineNotice:
                        layim.setFriendStatus(msg.id,msg.status);
                        break;
                }
            }
        });
        console.log(socket.mtype);

        //监听在线状态的切换事件
        layim.on('online', function(data){
            console.log("状态：" + data);
        });
        //监听签名修改
        layim.on('sign', function(value){
            console.log("签名：" + value);
        });
        //监听自定义工具栏点击，以添加代码为例
        layim.on('tool(code)', function(insert){
            layer.prompt({
                title: '插入代码'
                ,formType: 2
                ,shade: 0
            }, function(text, index){
                layer.close(index);
                insert('[pre class=layui-code]' + text + '[/pre]'); //将内容插入到编辑器
            });
        });
        //监听layim建立就绪
        layim.on('ready', function(){
            req.loading = false;
            /*req.get('/layim/apply-unread',{},function (res) {
                res.data&&layim.msgbox(res.data);
            });*/
            console.log(layim.cache().friend);
        });
        //监听发送消息
        layim.on('sendMessage', function(data){
            var To = data.to;
            var t = data.to.type=='friend';
            if(!t){
                selfFlag = true;
            }
            socket.send({mtype:(t?socket.mtype.chatFriend:socket.mtype.chatGroup),content:data.mine.content,toid:data.to.id});
            return;
        });
        //监听查看群员
        layim.on('members', function(data){
            //console.log(data);
        });
        //监听天窗口的切换
        layim.on('chatChange', function(res){
            var t = res.data.type=='friend';
            socket.send({
                mtype:t? socket.mtype.checkIsOnline:socket.mtype.checkOnlineCount,
                id:res.data.id
            });
        });

        //主入口
        app.set({
            type: 'iframe'
        }).init();

        $('dl.skin > dd').on('click', function() {
            var $that = $(this);
            var skin = $that.children('a').data('skin');
            switchSkin(skin);
        });
        var setSkin = function(value) {
            layui.data('kit_skin', {
                key: 'skin',
                value: value
            });
        },
        getSkinName = function() {
            return layui.data('kit_skin').skin;
        },
        switchSkin = function(value) {
            var _target = $('link[kit-skin]')[0];
            _target.href = _target.href.substring(0, _target.href.lastIndexOf('/') + 1) + value + _target.href.substring(_target.href.lastIndexOf('.'));
            setSkin(value);
        },
        initSkin = function() {
            var skin = getSkinName();
            switchSkin(skin === undefined ? 'default' : skin);
        }();

        //退出
        $('#logout').on('click', function() {
            var url = '/logout.html';
            common.logOut('退出登陆', '你真的确定要退出系统吗？', url)
        })
    });
</script>
</body>

</html>